<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用Computed属性来排序列表</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <style>
        .ascending:after {
            content: "25B2"
        }
        .descending:after {
            content: "25BC"
        }
    </style>
</head>
<body>
<div id="app">
    <table>
        <thead>
        <tr>
            <th>名称</th>
            <th>国家</th>
            <th v-bind:class="order === 1 ? 'descending' : 'ascending'"
                @click="sort">水坝</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="dam in damsByElectricity">
            <td>{{dam.name}}</td>
            <td>{{dam.country}}</td>
            <td>{{dam.electricity}}</td>
        </tr>
        </tbody>
    </table>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            dams: [
                {name: 'Nurek Dam', country: 'Tajikistan', electricity: 3200},
                {name: 'Three Gorges Dam', country: 'China', electricity: 22500},
                {name: 'Tarbela Dam', country: 'Pakistan', electricity: 3500},
                {name: 'Guri Dam', country: 'Venezuela', electricity: 10200}
            ],
            order: 1 //升序
        },
        computed:{
            damsByElectricity(){
                return this.dams.sort((d1, d2)=>(d2.electricity -d1.electricity) * this.order);
            }
        },
        methods:{
            sort(){
                this.order = this.order * -1;
            }
        }
    })
</script>

</body>
</html>